<template>
    <div class="login-page">
        <div class="layout-content">
            <div class="layout-top">
                WPS Manager
            </div>
            <div class="layout-main">
                <header>账号密码登录</header>
                <el-form :model="dateForm" ref="dateForm" class="demo-ruleForm">
                    <el-form-item
                        prop="name"
                        :rules="[
                            { required: true, message: '用户名不能为空'},
                        ]"
                    >
                        <el-input placeholder="请输入用户名" v-model.number="dateForm.name" autocomplete="off">
                            <span class="el-icon-user" slot="prepend"></span>
                        </el-input>
                    </el-form-item>
                    <el-form-item
                        prop="password"
                        :rules="[
                            { required: true, message: '密码不能为空'},
                        ]"
                    >
                        <el-input 
                            placeholder="请输入密码" 
                            show-password 
                            v-model="dateForm.password" 
                            autocomplete="off"
                            @keyup.enter.native="submitForm('dateForm')"
                        >
                            <span class="el-icon-lock" slot="prepend"></span>
                        </el-input>
                    </el-form-item>
                    <div class="remand-psd">
                        <el-checkbox v-model="checked" style="color:#a0a0a0;margin:0 0 20px 0">记住密码</el-checkbox>
                    </div>
                    <el-form-item>
                        <el-button type="primary" v-loading="thisLoading" @click="submitForm('dateForm')">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import Vue from 'vue';
import { setStore, getStore,removeStore, alertMessage } from "@/config/myUtil";
import { Form, FormItem , Checkbox} from "element-ui";
import { getLoginToken } from "@/api/getData";
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Checkbox);
export default {
    name:'Login',
    data(){
        return{
            dateForm:{
                name:"",
                password:""
            },
            checked:false,
            thisLoading:false,
        }
    },
    mounted(){
        var params = getStore("wpsmdataForm");
        if(params){
           this.checked = true;
           this.dateForm = params;
        }
    },
    methods:{
        async submitForm(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.thisLoading = true;
                    if(this.checked){
                        setStore("wpsmdataForm",this.dateForm);
                    }else{
                        removeStore("wpsmdataForm");
                    }
                    this.sendsubmit();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        async sendsubmit(){
            try {
                var params = {
                    grant_type:"password",
                    scope:"select",
                    client_id:"web_password",
                    client_secret:"workplan-manager",
                    username: this.dateForm.name,
                    password: this.dateForm.password
                }
                let res = await getLoginToken(params);
                this.thisLoading = false;
                if(res.access_token && res.refresh_token){
                    setStore('wpsmAccessToken',res.token_type + " " + res.access_token);
                    setStore('wpsmRefreshToken',res.refresh_token);
                    setStore('wpsmloginDate',moment(new Date()).valueOf());
                    this.$store.dispatch("getThismsgUaa",true);
                    this.$store.dispatch("initMenuList").then((data)=>{
                        if(data){
                            let redirectName = this.$route.query.redirect
                            this.$router.replace({name:redirectName||"menu"}); //replace会去除历史记录；
                        }else{
                            alertMessage("你未配置管理员权限，无法登录系统。","warning");
                            REMOVELOGINMSG();
                        }
                    });
                }else{
                    alertMessage(res.title);
                };
            } catch (error) {
                console.log(error);
                this.thisLoading = false;
            }
        }
    }
}
</script>
<style lang="less" scoped>
@import url('./less/index.less');
</style>